
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <title>优生活-购物车</title>
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/css')}}/index.css">
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/css')}}/ziy.css">
    {{--<!--  <script src="{{asset('org/home/js')}}/jquery-1.11.3.min.js" ></script>--}}
    {{--<script src="{{asset('org/home/js')}}/index.js" ></script>  -->--}}
    <script type="text/javascript" src="{{asset('org/home/js')}}/jquery1.42.min.js"></script>

    <script type="text/javascript" src="{{asset('org/home/js')}}/jquery-1.11.1.min.js"></script>
    {{--<script type="text/javascript" src="{{asset('org/home/js')}}/jquery.SuperSlide.2.1.1.source.js"></script>--}}
    <script type="text/javascript" src="{{asset('org/home/js')}}/select.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    @include('layouts._hdjs')
</head>
<body>
@include('layouts._homeMessage')
<!--头部-->

<!--头部-->
<div id="header">
    <div class="header-box">
        <h3 class="huany">优生活购物商城欢迎您的到来！</h3>
        <ul class="header-right">
            <li class="denglu dengl_hou">
                <div>
                    <a class="red" href="{{route('home.center')}}">Hi~{{auth()->user()->name}}</a>
                    <i class=""></i>
                    <i class="ci-leftll">
                        <s class="jt">◇</s>
                    </i>
                </div>
                <div class="dengl_hou_xial_k">
                    <div class="zuid_xiao_toux">
                        <a href="#"><img src="{{auth()->user()->face}}"></a>
                    </div>
                    <div class="huiy_dengj">
                        <a class="tuic_" href="{{route('home.logout')}}">退出</a>
                    </div>
                    <div class="toub_zil_daoh">
                        <a href="{{route('home.center.allOrder')}}">待处理订单</a>
                        <a href="{{route('home.collect.myCollect')}}">我的收藏</a>
                        <a href="{{route('home.center.edit','inform')}}">个人资料</a>
                    </div>
                </div>
            </li>
            <li class="shu"></li>
            <li class="denglu"><a class="ing_ps" href="{{route('home.collect.myCollect')}}">我的收藏</a></li>
            <li class="shu"></li>
        </ul>
    </div>
</div>
<!---->

<div class="yiny yiny_gouwc">
    <div class="beij_center">
        <div class="dengl_logo">
            <a href="/" title="返回商城首页"><img src="{{asset('org/home/images')}}/logo.jpg" style="width: 250px;margin-top: -35px"></a>
            <h1>购物车</h1>
        </div>
    </div>
</div>
<div id="myCarts">
    <div v-if="carts.length">
        <div class="beij_center">
            <div class="cart-main-header clearfix">
                <div class="cart-col-1">
                    <input type="checkbox" class="jdcheckbox" v-model="allChecked" @change="changeChecked()">
                </div>
                <div class="cart-col-2">全选</div><!-- $page.site 主站 团购 抢购   style -->
                <div class="cart-col-3">商品信息</div>
                <div class="cart-col-4">
                    <div class="cart-good-real-price">单价</div>
                </div>
                <div class="cart-col-5">数量</div>
                <div class="cart-col-6">
                    <div class="cart-good-amount">小计</div>
                </div>
                <div class="cart-col-7">操作</div>
            </div>
        </div>
        <div class="container">
            <div class="cart-shop-goods dangq_honh" v-for="(v,k) in carts">
                <div class="cart-shop-good">
                    <div class="cart-col-1">
                        <input type="checkbox" class="jdcheckbox"  v-model="v.checked">
                    </div>
                    <div class="cart-col-2" style="height: 82px;">
                        <a href="" target="_blank" class="g-img"><img :src="v.goods.picture[0]" alt=""></a>
                        <a style="font-size: 2px;color: orangered;">@{{ v.bale.natures }}</a>
                    </div>
                    <div class="fl houj_c">
                        <div class="cart-dfsg">
                            <div class="cart-good-name">
                                <a :href="'/content/'+ v.goods_id + '/' + v.bale_id" >@{{v.goods.title}}</a>
                            </div>
                        </div>
                        <div class="cart-good-pro"></div>
                        <div class="cart-col-4">
                            <div class="cart-good-real-price ">
                                <!--主品-->¥&nbsp @{{ v.goods.price + v.bale.attach }}
                            </div>
                            <div class="red">
                            </div>
                        </div>
                        <div class="cart-col-5">
                            <div class="gui-count cart-count" >
                                <a href="#" gui-count-sub="" class="gui-count-btn gui-count-sub "
                                   @click.prevent="minus(v)">-</a>
                                <a href="#" gui-count-add="" class="gui-count-btn gui-count-add"
                                 @click.prevent="plus(v)">+</a>
                              <div class="gui-count-input"><input dytest="" class="" type="text"
                                                                  :value="v.num"></div>
                            </div>
                        </div>
                        <div class="cart-col-6 ">
                            <div class="cart-good-amount">¥&nbsp;@{{ v.xiaoji }}</div><!-- 重量展示(只展示全球百货的重量) --></div>
                    </div>
                    <div class="cart-col-7">
                        <div class="cart-good-fun delfixed">
                            <a href="#" @click.prevent="del(v,k)">删除</a>
                        </div>
                        <div class="cart-good-fun">
                            <a :href="'/collect/'+ v.goods_id">
                                <span v-if="v.is_collected">移出收藏夹</span>
                                <span v-else>移入收藏夹</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jies_beij">
            <div class="beij_center over_dis">
                <div class="jies_ann_bei">
                    <p>已选 <em>@{{ jian }}</em> 件商品 总计（不含运费）：<span>￥@{{ total }}</span></p>
                    <a href="" class="order_btn" @click.prevent="jiesuan()">去结算</a>
                </div>
            </div>
        </div>
    </div>
    <div v-else style="text-align: center">
        <h1>购物车中没有商品</h1>
        <a href="/" style="font-size: 20px;line-height: 40px;">去购物吧...</a>
    </div>
</div>
<script>
    require(['hdjs','vue','axios'],function (hdjs,vue,axios) {
        new vue({
           el:'#myCarts',
           data:{
              carts:{!! json_encode($carts) !!} ,
              allChecked: false,
           },
            methods:{
              changeChecked(){
                  // 循环所有的购物车数据，将选中状态改成true
                  this.carts.forEach((v)=>{
                     v.checked = this.allChecked;
                  })
              },
              jiesuan(){
                  // 判断是否选中商品，若没有选中提示选中再结算
                  var zongjia = 0;
                  this.carts.forEach((v)=>{
                      if (v.checked) {
                          zongjia += v.xiaoji;
                      }
                  })
                  if (!zongjia)
                  {
                      hdjs.swal({
                          text: '请最少选择一个商品',
                          button: false,
                          icon: 'warning'
                      });
                      return false;
                  }
                  // alert('期许');
                  let ids = '';
                  this.carts.forEach((v)=>{
                      if (v.checked){
                          ids += v.id + ',';
                      }
                    })
                  location.href = '/order_lists/'+ ids;
              },
                del(v,k)
                {
                   axios.get('/deleteCart/'+ v.id).then((res)=>{
                       if (res.data.valid){
                           hdjs.swal({
                               text:res.data.message,
                               button:false,
                               icon: 'success',
                           });
                           this.carts.splice(k,1);
                       }
                   })
                },
              plus(v)
              {
                  if (v.num<v.bale.stock) {
                      axios.get('/addNum/'+ v.id +'/'+ v.goods.price +'/'+ v.bale.attach).then((res) => {
                          if (res.data.valid){
                              v.num += 1;
                              v.xiaoji = v.xiaoji + v.goods.price + v.bale.attach;
                          }
                      })
                  }
              },
              minus(v)
              {
                  if (v.num>1)
                  {
                      axios.get('/deleteNum/' + v.id + '/' + v.goods.price + '/' + v.bale.attach).then((res)=> {
                          if (res.data.valid) {
                              v.num = v.num - 1;
                              v.xiaoji = v.xiaoji - v.goods.price - v.bale.attach;
                          }
                      })
                  }
              }
            },
            // 自动计算属性
            computed:{
               total(){
                   var zongjia = 0;
                   this.carts.forEach((v)=>{
                       // 判断v里面的选中状态为真是，才计算总价
                       if (v.checked){
                           zongjia += v.xiaoji;
                       }
                   })
                  return zongjia;
               },
                jian(){
                   var zongjian = 0;
                   this.carts.forEach((v)=>{
                       if (v.checked){
                           zongjian = zongjian+v.num;
                       }
                   })
                    return zongjian;
                }
            }
        })
    })
</script>

<div class="beij_center">
    <div class="investment_f">
        <div class="investment_title">
            <div class="ds_dg on_d">为您推荐</div>
        </div>
        <div class="investment_con">
            <!---->
            <div class="picScroll_left_s"  style="display: block;">
                <div class="bd">
                    <ul class="picList">
                       @foreach($commendGoods as $commendGood)
                           {{--@dd($good->bale)--}}
                        <li>
                            <div class="pic"><a href="{{route('home.content',$commendGood)}}" target="_blank"><img src="{{$commendGood['picture'][0]}}" /></a></div>
                            <div class="title">
                                <a href="{{route('home.content',$commendGood)}}" target="_blank">{{$commendGood->title}}</a>
                                <div class="jiage_gouw"><span>¥</span>{{$commendGood['price']}}</div>
                                {{--<a href="{{route('home.addCart',['goods_id'=>$commendGood['id'],''])}}" class="cart_scroll_btn">加入购物车</a>--}}
                            </div>
                        </li>
                           @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<div class="dib_beij dib_beij_ger_zhongx">
    <div class="dib_jvz_beij">
        <div class="shangp_baoz">
            <p>本地购物&nbsp;&nbsp;看得见的商品</p>
            <p class="beng1">正品行货&nbsp;&nbsp;购物无忧</p>
            <p class="beng2">低价实惠&nbsp;&nbsp;帮你省钱</p>
            <p class="beng3">本地直发&nbsp;&nbsp;专业配送</p>
        </div>
        <div class="zhongj_youx">
            <div class="lieb_daoh">
                <div class="kef_dianh">
                    <p>客服电话</p><span>18335460350</span>
                </div>
            </div>
            <div class="lieb_daoh">
                <div class="kef_dianh kef_dianh_youx">
                    <p>意见收集邮箱</p><p>1130224187@qq.com</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
